<template>
  <div>
    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="30%">
      <div>
        <el-form :model="Info" label-width="120px">
          <el-form-item label="品牌名称">
            <el-input v-model="Info.brand_name" />
          </el-form-item>

          <el-form-item label="品牌官网">
            <el-input v-model="Info.brand_url" />
          </el-form-item>
          <el-form-item label="品牌图片">
            <el-input v-model="Info.brand_img" />
          </el-form-item>
          <el-form-item label="品牌描述">
            <el-input v-model="Info.brand_desc" />
          </el-form-item>
          <el-form-item label="品牌状态">
            <el-switch
              v-model="Info.status"
              :active-value="1"
              :inactive-value="0"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="confirm">确定</el-button>
            <el-button @click="dialogVisible = false">Cancel</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import {
  ref,
  defineExpose,
  reactive,
  inject,
  defineProps,
  watchEffect,
  defineEmits,
} from "vue";
import { addGoodsApi } from "@/api/goodsApi";
const props = defineProps({
  dialogTitle: {
    type: String,
    default: "添加品牌",
  },
  dialogInfo: {},
});
const emit = defineEmits(["getData"]);
const dialogVisible = ref(false);
const Info = ref({
  brand_name: "",
  brand_url: "",
  brand_img: "",
  brand_desc: "",
  status: "",
});
const message = inject("message");
//新增
const confirm = async () => {
  if (props.dialogTitle == "添加品牌") {
    const res = await addGoodsApi(Info.value);
    res.code == 1 ? message.success(res.msg) : message.warning(res.msg);
  } else {
    //修改
    const res = await editGoodsApi(Info.value);
    res.code == 1 ? message.success(res.msg) : message.warning(res.msg);
  }
  emit("getData");
  dialogVisible.value = false;
};
const open = () => {
  dialogVisible.value = true;
};
//清空
const reset = () => {
  for (let i in Info.value) {
    Info.value[i] = "";
  }
};
watchEffect(() => {
  if (props.dialogInfo) {
    Info.value = props.dialogInfo;
  }
});
defineExpose({
  confirm,
  open,
  Info,
  reset,
});
</script>
<style scoped lang="scss"></style>
